<template>
  <div class="smart">
    <ul>
      <li class="flex justify-between align-center">
        <div class="title">跳转网址</div>
        <div class="flex-1 text-center">
          <a :href="kw" target="_blank">{{ kw }}</a>
        </div>
        <div>
          <div class="input-select">
            <input v-model="suffix" type="text" />
            <select v-model="suffix">
              <option
                v-for="(item, key) in commonTlds"
                :key="key"
                :value="item"
              >
                {{ item }}
              </option>
            </select>
          </div>
        </div>
      </li>
      <li class="mt-2 flex">
        <div class="title"> 搜索 </div>
        <div class="flex gc-2 align-center flex-1 engins flex-wrap">
          <div
            v-for="(item, key) in searchEngines"
            :key="key"
            class="images flex flex-s gc-2"
            @click="search(item.query)"
          >
            <img width="16" height="16" :src="getWebIcon(item.site)" />
            {{ item.title }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { getWebIcon } from '@/views/bus';
  import { openLink } from '@/utils/utils';
  import { commonTlds, searchEngines } from './options';

  const suffix = ref('com');
  const props = defineProps<{
    keyword: string;
  }>();
  const kw = computed(() => {
    if (!props.keyword.includes('.') && props.keyword) {
      return `http://www.${props.keyword}.${suffix.value}`;
    }
    return props.keyword;
  });
  const search = (link: string) => {
    openLink(link + props.keyword);
  };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
